<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('#loginBtn').click(function() {
                var username = $('#username').val();
                var password = $('#password').val();
                if(username && password) {
                    var data = {
                        username,
                        password
                    }
                    $.ajax({
                        url: 'http://127.0.0.1:7788/user/login',
                        method: 'POST',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        success: function(res) {
                            var token = res.data.token
                            localStorage.setItem('token',token);
                            location.href = 'http://127.0.0.1:5500/index.html';
                        }
                    })
                } else {
                    alert('用户名或者密码不能为空！');
                }
                return false
            })
        })
    </script>
</head>
<body>
    <div class="login">
        <form>
            <h2>看 点 咨 询 平 台</h2>
            <div class="form-group">
                <label for="username">姓名</label>
                <input type="username" class="form-control" id="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <!-- 阻止表单默认行为 -->
                <input type="submit" value="登录" id="loginBtn" class="btn btn-primary">
                <!-- <button class="btn btn-primary">登录</button> -->
            </div>
            <div style='margin-top: 2em;'>
                <span>用户名：admin1 </span>
                <span>密码：123321</span>
            </div>
        </form>
    </div>
</body>
<style>
    html,body {
        height: 100%;
    }
    .login {
        height: 100%;
        background-image: url('./image/back.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    h2{
        text-align: center;
        color: #fff;
    }
    .login form {
        width: 400px;
        height: 300px;
        padding: 20px;
        /* border: 1px solid #ccc; */
        border-radius: 4px;
        background-color: rgba(43, 44, 44, 0.52);
        color: #fff;
        font-weight: bold;
    }
    .login form:hover{
        /* box-shadow: 0px 0px 5px white; */
    }
</style>
</html>